@model Leads360Express.Repository.Pages.Dashboard.DashboardModel
@{
    Layout = "~/Views/EmailSummary/_EmailSummaryLayout.cshtml";
    ViewBag.Title = "Milestone report";

    // Local variables
    string strFrom = DateTime.Now.AddDays(-7).ToShortDateString();
    string strTo = DateTime.Now.ToShortDateString();
}
<form action="#" class="form" id="milestoneReport">
    <fieldset>
        <div class="content">
            <div class="error-msg" id="visibleErrormsg" style="display:none; margin-top:-1px">
                <span>This information is currently not available because of a problem with the network or server.  Please try again in a few moments.</span>
            </div>

            <h2 class="app">
                <strong>Milestone Report</strong>
                @Html.Partial("_PatialLeads_Calls", @Model.LeadCall )
            </h2>

            <div class="toolbar topblue">
                <span class="area">
                    <div class="select-holder spl lead-sources milestone">
                        <select class="editable-select" id="selectLead" data-bind="value: LeadSources, foreach: LeadSourcesOptions, optionsCaption: 'All Lead Sources'">
                            <option data-bind="value: LeadSourceId, text: LeadSourceName"></option>
                        </select>
                    </div>

                    <div class="select-holder sel-users milestone">
                        <select id="selectUsers" class="editable-select" data-bind="value: Users, foreach: UsersOptions, optionsCaption: 'All Users'">
                            <option data-bind="value: AgentId, text: AgentName"></option>
                        </select>
                    </div>
                </span>

                <span class="area">
                    <span class="spl" style=""><strong>Range:</strong></span>
                    <input type="radio" class="radio spl" name="range" value="true" data-bind="checked: RangeOption" />
                    <div class="select-holder sel-range" style="width:112px"><!-- class="spl" -->
                        <select id="selectDate" data-bind="enable: RangeEnable, value: DateRange , foreach: DateRangeOptions, optionsCaption: 'Today'" style="width:112px">
                            <option data-bind="value: RangeValue, text: RangeName"></option>
                        </select>
                    </div>
                    <span class="spl" style="padding-left:3px;"><strong>or</strong></span>
                    <input type="radio" class="radio spl" name="range" value="false" data-bind="checked: RangeOption"/>
                    <label for="startDate" class="spl" style="font-weight:normal;">From:</label>
                    <input type="text" id="startDate" value="@strFrom" class="text date" data-bind="enable: FromDateEnable"/><!-- class="spl" -->
                    <label for="endDate" class="spl" style="font-weight:normal;padding-left:5px;">To:</label>
                    <input type="text" id="endDate" value="@strTo" class="text date" data-bind="enable: ToDateEnable" />
                </span>
                <span class="area left">
                    <a class="btn btn-go" href="javascript:void(1);" data-bind="click: search">Go</a>
                </span>

                <!--<a class="btn btn-exportexcel right" style="margin-right: 5px;" href="@Url.Action("ExportToExcel")">Export to Excel</a>-->
            </div>

            <div data-bind="visible:!NoResultsFound()">
                <span class="paging">
                    <span class="show">Show
                        <input type="text" id="pageshow" class="text" data-bind="value: PageSize" maxlength="3" onkeypress="return isNumberKey(event)" value="10" />
                        per page <span class="smallText" data-bind="text: PageSizeText"></span>
                    </span>
                    <span class="pages"><span class="smallText" data-bind="text: PageCurrentText"></span>Page
                        <input type="text" id="pageIndex" class="text" data-bind="value:CurrentPageIndex" onkeypress="return isNumberKey(event)" />
                        of <label data-bind="text:MaxPageIndex"></label>
                        <a href="##" class="btn btn-prev-arrow" data-bind="click: PrevPage ,attr: {'class': PrevButtonClass}"></a>
                        <a href="##" class="btn btn-next-arrow" data-bind="click: NextPage ,attr: {'class': NextButtonClass}"></a>
                    </span>
                </span>
                <div class="table table-leads milestonereport">
                    <div class="title">
                        <div class="col1" data-bind="click: function(event) { SetOrder(event, 'AgentName') }">
                            <span class="w">
                                <a href="#">User</a>
                                <div class="sort_wrapper" id="AgentName"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                        <div class="col1 col2" data-bind="click: function(event) { SetOrder(event, 'SpeedToContactAttempt') }">
                            <span class="w">
                                <a href="#">Speed to Contact Attempt</a>
                                <div class="sort_wrapper" id="SpeedToContactAttempt"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                        <div class="col1 col3" data-bind="click: function(event) { SetOrder(event, 'SpeedToContact') }">
                            <span class="w">
                                <a href="#">Speed to Contact</a>
                                <div class="sort_wrapper" id="SpeedToContact"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                        <div class="col1 col4" data-bind="click: function(event) { SetOrder(event, 'ContactCount') }">
                            <span class="w">
                                <a href="#">Contacts</a>
                                <div class="sort_wrapper" id="ContactCount"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                        <div class="col1 col5" data-bind="click: function(event) { SetOrder(event, 'ContactPercent') }">
                            <span class="w">
                                <a href="#">%</a>
                                <div class="sort_wrapper" id="ContactPercent"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                        <div class="col1 col6" data-bind="click: function(event) { SetOrder(event, 'QualificationCount') }">
                            <span class="w">
                                <a href="#">Qualifications</a>
                                <div class="sort_wrapper" id="QualificationCount"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                        <div class="col1 col7" data-bind="click: function(event) { SetOrder(event, 'QualificationPercent') }">
                            <span class="w">
                                <a href="#">%</a>
                                <div class="sort_wrapper" id="QualificationPercent"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                        <div class="col1 col8" data-bind="click: function(event) { SetOrder(event, 'ConversionCount') }">
                            <span class="w">
                                <a href="#">Conversions</a>
                                <div class="sort_wrapper" id="ConversionCount"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                        <div class="col1 col9" data-bind="click: function(event) { SetOrder(event, 'ConversionPercent') }">
                            <span class="w">
                                <a href="#">%</a>
                                <div class="sort_wrapper" id="ConversionPercent"><span class="grid_order ui_icon"></span></div>
                            </span>
                        </div>
                    </div>
                    <div data-bind="foreach: Report">
                        <div class="line">
                            <div class="col1"><span class="w" data-bind="text: AgentName"></span></div>
                            <div class="col1 col2"><span class="w" data-bind="text: SpeedToContactAttempt"></span></div>
                            <div class="col1 col3"><span class="w" data-bind="text: SpeedToContact"></span></div>
                            <div class="col1 col4"><span class="w" data-bind="text: ContactCount"></span></div>
                            <div class="col1 col5"><span class="w" data-bind="text: ContactPercent"></span></div>
                            <div class="col1 col6"><span class="w" data-bind="text: QualificationCount"></span></div>
                            <div class="col1 col7"><span class="w" data-bind="text: QualificationPercent"></span></div>
                            <div class="col1 col8"><span class="w" data-bind="text: ConversionCount"></span></div>
                            <div class="col1 col9"><span class="w" data-bind="text: ConversionPercent"></span></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel" data-bind="visible:NoResultsFound">
                <div class="error-msg"><span>No results were found.</span></div>
            </div>

            @Html.Partial("_Footer.Copyright")
        </div><!-- //.content -->
    </fieldset>
</form>

<script type="text/javascript">
//<![CDATA[
    $(function() {
        $("#startDate").datepicker();
        $("#endDate").datepicker();
    });

    var data = @(Html.Raw(Json.Encode(Model)));
//]]>
</script>
<script src="~/Scripts/viewModel/MilestoneReportViewModel.js" type="text/javascript"></script>
